<template>
  <!-- 播放列表 -->
  <div class="player-song-list" v-show="props.playerSongListIsShow">
    <!-- 头部 -->
    <div class="player-header">
      <!-- 列表标题 -->
      <sort-title-vue
        :title="playerListContentTitle"
        :isShowTitle="isShowTitle"
      ></sort-title-vue>

      <!-- 播放总数 收藏 清空 -->
      <div class="player-sum-handle">
        <div class="sing-sum">共{{ countData }}首</div>
        <div class="player-list-handle">
          <div class="handle-collect">
            <i class="iconfont icon-tianjiawenjian"></i>
            <span>收藏全部</span>
          </div>
          <div class="handle-empty">
            <span>清空列表</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 播放列表 -->
    <div class="player-list-container">
      <get-sing-list-vue></get-sing-list-vue>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from "vue";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
import axios from "axios";
import sortTitleVue from "../sortTitle/sortTitle.vue";
import getSingListVue from "../songListInfo/children/getSingList/getSingList.vue";

const store = useStore();
const route = useRoute();

// 接收是否显示
const props = defineProps({
  playerSongListIsShow: Boolean,
  playOrOut: Boolean,
});

// 列表标题
const playerListContentTitle = "当前播放";
const isShowTitle = false;

// 一共多少首
const countData = computed(() => {
  return store.state.m_player.countListData;
});

// 选中歌曲id
const musicId = computed(() => {
  return store.state.musicSrc;
});

// 监听是否播放
watch(
  () => props.playOrOut,
  (newV) => {
    store.commit("updateIsPlay", newV);
  },
  { deep: true }
);
</script>
<style lang='less'>
@import url(../../assets/fonts/player-add/iconfont.css);
@import url(../../assets/fonts/song-list/iconfont.css);
@import url(../../assets/fonts/player/iconfont.css);

.player-song-list {
  z-index: 991;
  position: fixed;
  right: 0;
  top: 66px;
  width: 420px;
  height: 100%;
  background-color: rgb(255, 255, 255);
  box-shadow: -1px -2px 4px 1px #0000001c;
  padding-bottom: 80px;

  overflow: scroll;
  //设置滚动条整体样式
  &::-webkit-scrollbar {
    width: 3px;
  }
  // 当鼠标经过时显示滚动条
  &:hover {
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.103);
      background-color: #e0e0e0 !important;
    }
  }
  // 滚动条颜色
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
    background-color: #e0e0e000 !important;
  }
  // 未滚动的颜色
  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.014);
    border-radius: 0;
    // background: rgba(255, 0, 0, 0.89);
  }

  .player-header {
    padding-top: 20px;
    padding: 12px;
    margin-top: 10px;

    .sing-sum {
      color: #00000036;
    }

    .player-sum-handle {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .player-list-handle {
        display: flex;
        align-items: center;

        .handle-collect,
        .handle-empty {
          &:hover {
            cursor: pointer;
          }
        }
        .handle-collect {
          display: flex;
          align-items: center;

          i {
            font-size: 20px;
            margin-right: 2px;
          }
        }

        .handle-empty {
          span {
            color: #026eb1;
          }
        }

        div {
          margin-right: 18px;
        }
      }
    }
  }

  .player-list-container {
    .sing-list-container {
      margin-bottom: 134px;
      font-size: 12px;

      .list-title {
        display: none;
      }

      .list-container {
        div {
          flex: none;
        }

        .container-box {
          position: relative;
          justify-content: space-between;
          padding: 0 10px;
          padding-left: 20px;

          .list-sing-on,
          .list-album-name,
          .list-sing-pop {
            display: none;
          }

          .list-sing-name {
            flex: 0.6;

            .music-additional {
              max-width: 55px;
              overflow: hidden;
            }

            span {
              max-width: none;
            }

            span:nth-child(2) {
              max-width: 45px;
            }
          }

          .list-sing-user-name {
            flex: 0.25;
          }

          .list-sing-time {
            flex: 0.15;
          }

          .list-sing-on,
          .list-album-name {
            display: block;
            padding: 0;
            padding-right: 5px;

            span {
              display: none;
            }

            &::before {
              content: "\e87c";
              display: none;
              position: absolute;
              top: 5px;
              left: -10px;
              font-family: "iconfont" !important;
              font-size: 10px;
              transform: scale(0.75);
              font-style: normal;
              -webkit-font-smoothing: antialiased;
              -moz-osx-font-smoothing: grayscale;
            }
          }

          .list-album-name {
            position: relative;
            padding: 0 10px;
            &::before {
              display: block;
              content: "\e6c8";
              position: absolute;
              top: 5px;
              left: 3px;
              font-size: 16px;
            }
            &:hover {
              cursor: pointer;
              color: black;
            }
          }

          .list-sing-time {
            padding-left: 10px;
          }

          &:hover {
            .list-sing-name,
            .list-sing-time,
            .list-sing-user-name {
              color: black;
            }
          }
        }
        .double-active-bofang {
          .list-sing-on,
          .list-sing-name,
          .list-sing-user-name {
            color: #ec4141!important;
          }

          .list-sing-on {
            &::before {
              display: block;
            }
          }
        }

        .double-active-zanting {
          .list-sing-on,
          .list-sing-name,
          .list-sing-user-name {
            color: #ec4141!important;
          }

          .list-sing-on {
            &::before {
              content: "\e63d";
              display: block;
            }
          }
        }
      }
    }
  }
}
</style>